<template>
  <div style="width:200px;margin:0 auto;">
    <div><button @click="title=!title">按钮</button></div>
    <!-- transition只适用于有一个根元素或有根元素的组件 -->
    <!-- out-in意思是动画的形式先消失再出现 appear意思是页面第一次渲染进来就有动画效果-->
    <transition name="why" mode="out-in" appear>
       <h2 v-if="title">hellow</h2>
       <h2 v-else>word</h2>
    </transition>
  </div>
  
</template>

<script setup>
  import {ref} from 'vue'
  const title=ref(true)
  
</script>

<style scoped>
.why-enter-active{
  animation:identifier 2s ease
}
.why-leave-active{
   animation:identifier 2s reverse
}
@keyframes identifier {
  0%{
    transform:scale(0);
    opacity: 0;
  }
  50%{
    transform:scale(1.5);
  }
  100%{
    transform:scale(1);
    opacity: 1;
  }
}
</style>